<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-top-stats>
				<el-row style="width:100%">
					<el-col :span="8">
						<div class="title">预估结算佣金</div>
						<div class="date">{{ topStartTime }} ~ {{ topEndTime }}</div>
						<div class="num">￥{{ money || 0 }}</div>
					</el-col>
					<el-col :span="8">
						<div class="title">新增用户</div>
						<div class="date">{{ topStartTime }} ~ {{ topEndTime }}</div>
						<div class="num">{{ count || 0 }}</div>
					</el-col>
					<el-col :span="8">
						<div class="title">
							什么是预估佣金
							<el-tooltip
								effect="dark"
								content="用户付款完成后所产生的预估佣金"
								placement="top-start"
							>
								<i class="el-icon-warning"></i>
							</el-tooltip>
						</div>

						<div class="title">
							什么是预估结算佣金
							<el-tooltip
								effect="dark"
								content="用户确认收货后所产生的佣金"
								placement="top-start"
							>
								<i class="el-icon-warning"></i>
							</el-tooltip>
						</div>
					</el-col>
				</el-row>
			</template>
			<template #slot-filter>
				<div style="margin: 0 20px;">
					<date-picker @change="changeDate" @refresh="changeDate"></date-picker>
				</div>
				<el-button size="mini">导出报表</el-button>
				<el-select
					v-model="channelValue"
					placeholder="请选择渠道"
					size="mini"
					style="margin: 0 20px;"
					@change="val => crud.refresh({ channelId: val, page: 1 })"
				>
					<el-option
						v-for="(item, index) in channelList"
						:key="index"
						:label="item.label"
						:value="item.value"
					>
					</el-option>
				</el-select>
			</template>
			<template #table-column-date="{ scope }">
				<span>{{ scope.row.date | date_format }}</span>
			</template>
		</cl-crud>
	</div>
</template>

<script>
import DatePicker from '@/components/common/date-picker';
import moment from 'moment';

export default {
	data() {
		return {
			channelValue: '',
			channelList: [],
			topStartTime: moment().format('YYYY-MM-DD 00:00:00'),
			topEndTime: moment().format('YYYY-MM-DD 23:59:59'),
			money: '',
			count: ''
		};
	},
	components: {
		DatePicker
	},
	mounted() {},

	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.goodsMenagement.jljWechatReport)
				.set('dict', {
					api: {
						page: 'channelReport'
					}
				})
				.set('table', {
					columns: [
						{
							label: '日期',
							prop: 'date',
							align: 'center'
						},
						{
							label: '渠道名称',
							prop: 'channelName',
							align: 'center'
						},
						{
							label: '新增用户',
							prop: 'newUserNum',
							align: 'center',
							width: 200
						},
						{
							label: '有效订单',
							prop: 'validOrderNum',
							align: 'center'
						},
						{
							label: '失效订单',
							prop: 'invalidOrderNum',
							align: 'center'
						},
						{
							label: '预估佣金',
							prop: 'validCommissionTotal',
							align: 'center'
						},
						{
							label: '失效佣金',
							prop: 'invalidCommission',
							align: 'center'
						},
						{
							label: '预估结算佣金',
							prop: 'settleCommissionTotal',
							align: 'center'
						},
						{
							label: '礼金消耗',
							prop: 'tljMoney',
							align: 'center'
						}
					],
					op: {
						visible: false
					}
				})
				.set('layout', [
					['slot-top-stats'],
					['refresh-btn', 'slot-filter', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					const { subdData } = await next({ ...params });
					this.money = subdData.settleCommissionTotal;
					this.count = subdData.newUserNum;
					this.channelList = subdData.channel.map(i => {
						return {
							label: i.name,
							value: i.id
						};
					});
				})
				.done();

			app.refresh({
				startTime: moment().format('YYYY-MM-DD 00:00:00'),
				endTime: moment().format('YYYY-MM-DD 23:59:59')
			});
		},
		changeDate(val) {
			console.log(val);
			if (val) {
				this.topStartTime = val[0];
				this.topEndTime = val[1];
				this.crud.refresh({ startTime: val[0], endTime: val[1], page: 1 });
			} else {
				this.topStartTime = '无';
				this.topEndTime = '无';
				this.crud.refresh({ startTime: '', endTime: '', page: 1 });
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.title {
	text-align: center;
	margin: 20px 0;
}
.date{
	text-align: center;
	margin-bottom: 20px;
}
.num{
	text-align: center;
}
</style>
